<script lang="ts" setup>
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import Tag from '@/home/components/Tag.vue';

const { $fetch } = useFetch();
const { data: listing } = useAsyncData(
  'search:hotTag',
  () => $fetch('/esInfoProduct/getHotLabel', { method: 'post' }),
);
</script>

<template>
  <section class="page-search-hot-tag rounded-6 bg-white p-24 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
    <h2 class="text-16 text-#292929 font-medium leading-22">{{ $t('home.search.hotTag.title') }}</h2>

    <hr class="mt-16 h-1 border-#f7f7f7">

    <ul class="mt-16 flex flex-wrap gap-16" v-if="listing?.length">
      <li
        class="rounded-4 bg-#FAFAFA text-#8B8B8B hover:(bg-#345DE2/6 text-#345DE2)"
        v-for="item in listing"
        :key="item.labelId"
      >
        <Tag class="block size-full max-w-320 truncate px-16 py-4 text-12 leading-16" :id="item.labelId" :name="item.labelName" blank />
      </li>
    </ul>
  </section>
</template>

<style lang="scss" scoped>
</style>
